<template>
  <div class="qiandao">
    <div class="header-user">
      <div class="user1">
        <div
          class="user1-1"
          style="display:inline-block"
        >
          <van-image
            style="width:50%;height:50%"
            round
            width="10rem"
            height="10rem"
            :src="this.userlist.avatar"
          >

          </van-image>
        </div>
        <div class="user1-2">
          <span class="p1">{{this.userlist.nickname}}</span>
          <span class="p2">积分:{{this.userlist.integral}}</span>
        </div>
      </div>

      <div class="user2">
        <van-icon name="bars" />
        <span @click="tiaozhuan">明细</span>
      </div>
    </div>

    <div class="day-top">
      <van-grid :column-num="7">
        <van-grid-item
          v-for="item in jifenlist"
          :key="item.id"
        >
          <template #icon>
            <van-icon name="medal-o" />
          </template>
          <template #text>
            <span class="span-1">{{item.title}}</span>
            <span class="span-2">{{item.integral}}</span>
          </template>
        </van-grid-item>
      </van-grid>
      <van-button
        class="btn"
        round
        type="info"
      >{{msg}}</van-button>
    </div>

    <div class="day-bottom">
      <div class="bot-1">
        <p class="p1">已累计签到</p>
      </div>
      <div style="text-align: center;">
        <div class="day">
          {{day}}
        </div>
        <span>天</span>
      </div>

      <qiandao></qiandao>
      
    </div>
  </div>
</template>
<script>
import qiandao from "../../components/qiandao/qiandao.vue"
export default {
  data() {
    return {
      token: localStorage.token,
      userlist: [],
      jifenlist: [],
      msg: "",
      day: "",
      
    };
  },
  methods: {
    async getuser() {
      const res = await this.$http.getuser(this.token);
      
      this.userlist = res.data.data;
    },

    // 获取每天的签到积分
    async getjifen() {
      const res = await this.$http.daynum(this.token);
      // console.log(res.data.data);
      this.jifenlist = res.data.data;
    },
    // 获取签到天数
    async getday() {
      const res = await this.$http.qiandaoday(this.token);
      console.log(res.data.data);
      this.day = res.data.data.sumSignDay;
    },
    // 判断今天是否已签到
    async getcontr() {
      const res = await this.$http.contr(this.token);
      console.log(res.data.message);
      this.msg = res.data.message;
    },
    tiaozhuan(){
      this.$router.push("/pages/users/user_sgin_list/index")
    }
    
  },
  created() {
    this.getuser();
    this.getjifen();
    this.getday();
    this.getcontr();
    // this.getCumulative();
  },
  components:{
    qiandao
  }
};
</script>
<style lang="scss">
.qiandao {
  margin: 0px;
  padding: 0px;
  .header-user {
    width: 100%;
    height: 160px;
    background: skyblue;

    .user1 {
      float: left;
      width: 60%;
      margin-top: 5%;
      .user1-1 {
        display: flex;
        flex-direction: column;
        width: 52%;
      }
      .user1-2 {
        float: right;
        display: flex;
        flex-direction: column;
        margin-top: 15%;
        .p2 {
          display: inline-block;
          width: 50px;
          height: 20px;
          border: 1px solid red;
          text-align: center;
          background: pink;
          line-height: 20px;
          font-size: 12px;
          color: rgb(87, 87, 87);
        }
      }
      .van-image {
        margin-top: 15%;
        margin-left: 20%;
        // img {
        //   width: 60%;
        //   height: 60%;
        // }
      }
    }
    .user2 {
      // display: inline-block;
      float: right;
      margin-top: 15%;
      // margin-right: 5%;
      display: inline-block;
      width: 50px;
      height: 30px;
      border: 1px solid #ddd;
      text-align: center;
      line-height: 30px;
      border-radius: 20px 0px 0px 20px;
    }
  }

  .day-top {
    text-align: center;
    width: 90%;
    height: 270px;
    border: 1px solid #be9d9d;
    margin: 0 auto;
    margin-top: -10%;
    margin-bottom: 5px;
    background: rgb(248, 248, 248);
    border-radius: 10px 10px 0px 0px;

    .van-grid {
      margin-top: 10%;
      height: 30%;
      .van-grid-item {
        // font-size: 12px;
        .van-grid-item__content {
          padding: 0px;
        }

        .van-grid-item__text {
          font-size: 12px;
        }

        .van-grid-item__content {
          .span-1 {
            font-size: 12px;
          }
        }
      }
    }

    .btn {
      width: 200px;
      height: 35px;
      margin: 20%;
    }
  }

  .day-bottom {
    width: 90%;
    // height: 300px;
    border: 1px solid #be9d9d;
    margin: 0 auto;
    margin-bottom: 5px;
    background: rgb(248, 248, 248);
    text-align: center;
    .day {
      width: 35%;
      height: 35%;
      border: 1px solid orange;
      display: inline-block;
      font-size: 80px;
      text-align: center;
      background: rgb(124, 157, 170);
      color: rgb(247, 247, 247);
    }

    
  }
}
</style>